<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 3000px;
        }
    </style>
    <script>

        // onload事件    等待页面资源加载完毕以后才执行这个函数
        // onfocus 获取焦点
        // onblur 失去焦点



        // 资源是有限的
        //    开100个窗口的时候，资源不够用
        //    就会给当前页面(焦点页面) 多分配一些资源 ， 其他页面资源就会少分配一点





        // var oDiv = document.getElementById('a') ;
        // console.log(oDiv);   // null 
        // 获取不到对象   --- 对象还没出生


        // 等待页面资源加载完毕以后才执行这个函数
        window.onload = function () {
            var oDiv = document.getElementById('a');
            console.log(oDiv);
            setInterval(function () {
                oDiv.innerHTML += '啊';
            }, 1000)
        }

        // 页面打开的时候既不算失去焦点也不算获取焦点
        window.onfocus = function () {
            console.log('获取了焦点');
        }

        window.onblur = function () {
            console.log('失去了焦点');
        }


        // 浏览器窗口大小发生改变就会触发这个事件  --- 高频率触发事件
        window.onresize = function() {
            console.log('尺寸变了')
        }

        // 滚动条位置发生改变就会触发这个事件  --- 高频率触发事件
        window.onscroll = function() {
            console.log('我滚了');
        }



    </script>
</head>

<body>

    <div id="a">11</div>

</body>

</html>